<template>
    <div class="preview-container">
        <div class="content">
            <div class="content-title">
                <p>申请参评信息预览</p>
                <span @click="cancel"></span>
            </div>
            <div @click="handleToBasicInfo" class="tips-text">查看参评人员具体业绩信息及佐证材料请点击此处</div>
            <table-preview style="margin-top: 16px" :resData="resData"></table-preview>
            <div class="bottomOperation" v-if="bottomOperation">
                <el-button size="mini" @click="cancel()">取消</el-button>
                <el-button type="primary" size="mini" @click="commit()">确定</el-button>
            </div>
        </div>
    </div>
</template>

<script>

import tablePreview from "@/components/reviewsManage/tablePreview";
export default {
    name: "reviewsPreview",
    data() {
        return {
            tableInfo: [],
            bottomOperation: true,
            textbookHandoutMap: [],
        }
    },
    props: ['resData'],
    components:{
        tablePreview,
    },
    created() {
        if (this.resData.bottomOperation == false) {
            this.bottomOperation = this.resData.bottomOperation;
        }
    },
    methods: {
        cancel() {
            this.$emit('update:openPreview', false)
        },
        commit() {
            this.$emit('commitPreview')
        },
        handleToBasicInfo() {
            let query = { userId:this.resData.info.userId }
            let routeData = this.$router.resolve({ path: '/personalInfo', query: query});
            window.open(routeData.href, '_blank');
        }
    },
}
</script>

<style scoped>
.preview-container {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 2;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.content {
    background: white;
    width: calc(100% - 13%);
    height: 80%;
    font-size: 14px;
    box-shadow: 3px 1px 12px 1px #00000069;
    border-radius: 10px;
    padding-bottom: 56px;
    overflow-y: auto;
    position: relative;
}

.content-title {
    width: calc(100% - 13%);
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    color: white;
    padding: 12px 0px;
    background: url('../../assets/reviews/icon_tu@2x.png') no-repeat;
    background-size: 100% 100%; /* 背景图完整覆盖容器，但宽高比例变了，图片变形。*/
    position: fixed;
    z-index: 99;
}

.content-title > span {
    display: block;
    width: 20px;
    height: 20px;
    background: url("../../assets/reviews/icon_shanchu@2x.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 30px;
    top: 20px;
    cursor: pointer;
}


.bottomOperation {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding-bottom: 20px;
}

.bottomOperation > button {
    width: 120px;
}

.baseUserInfoPic{
    display: block;
    width: 80%;
    margin: 0 auto;
}
.tips-text{
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    font-family: KaiTi;
    margin-top: 80px;
    color: rgba(237, 88, 102, 1);
}
</style>
